<template>
    <div class="container">新创建
        <div ref="echarts_box"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, markRaw } from "vue"
import { xzqh_dict, all_data } from "../assets/data/index.ts"
import * as echarts from 'echarts'

let statis_data = ref([])
let time_data = ref([])
let rt_code_data = ref([])
let xzqh_data = ref([])
let xzhq_data = ref([])
const myChart = ref()
const echarts_box = ref()
onMounted(() => {
    init_data(all_data)
})
const options = ref<any>({
    baseOption: {
        timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [],
            label: {
                formatter: function (s) {
                    return s;
                }
            }
        },
        title: {
            subtext: 'test'
        },
        tooltip: {},
        legend: {
            left: 'right',
            data: [],
        },
        calculable: true,
        grid: {
            top: 80,
            bottom: 100,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value.replace('\n', '');
                        }
                    }
                }
            }
        },
        xAxis: [
            {
                type: 'category',
                axisLabel: { interval: 0 },
                data: [],
                splitLine: { show: false }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'GDP（亿元）'
            }
        ],
        series: []
    },
    options: []
})

function init_data(arr) {
    const colors = ["#aa00ff", "#c51162", "#aa00ff", "#6200ea", "#304ffe", "#2962ff"]
    const time_arr = []
    const rt_arr = []
    const xzqh_arr = []
    const xzhq_arr = []
    const arr1 = arr.map(el => {
        const title = el.f_year + "S" + el.f_quarter
        const xzqh_name = xzqh_dict.find(e => e.xzqhCode === el.f_xzqh_code)?.xzqhName || "未知"
        const flag = time_arr.find(e => e === title)
        const flag2 = rt_arr.find(e => e === el.f_rt_code)
        const flag3 = xzqh_arr.find(e => e === xzqh_name)
        const flag4 = xzhq_arr.find(e => e === el.f_xzhq_code)
        if (!flag) {
            time_arr.push(title)
        }
        if (!flag2) {
            rt_arr.push(el.f_rt_code)
        }
        if (!flag3) {
            xzqh_arr.push(xzqh_name)
        }
        if (!flag4) {
            xzhq_arr.push(el.f_xzhq_code)
        }
        return {
            title,
            rt_code: el.f_rt_code,
            count: Number(el.f_tuban_count),
            xzhq_code: el.f_xzhq_code,
            xzhq_name: null,
            xzqh_name
        }
    }).sort((a, b) => {
        if (a.title > b.title) {
            return 1
        } else {
            return -1
        }
    })
    statis_data.value = arr1
    time_data.value = time_arr
    rt_code_data.value = rt_arr
    xzqh_data.value = xzqh_arr
    xzhq_data.value = xzhq_arr

    options.value.baseOption.xAxis[0].data = xzhq_arr.map((e, ind) => {
        if (ind % 2 == 0) {
            return `\n${e}`
        } else {
            return e
        }
    })
    options.value.baseOption.timeline.data = time_arr
    options.value.baseOption.legend.data = rt_arr
    options.value.baseOption.series = rt_arr.map((e, ind) => {
        return {
            name: e,
            type: "bar"
        }
    })
    options.value.baseOption.series.push({
        name: '行政区划遥感图斑数量',
        type: 'pie',
        center: ['75%', '35%'],
        radius: '28%',
        label: false,
        z: 100
    })
    return init_echarts()
}
function init_echarts() {
    time_data.value.forEach(el => {
        const series = []
        rt_code_data.value.forEach(e => {
            series.push({
                data: statis_bar(el, e)
            })
        })
        const arr = []
        xzqh_data.value.forEach(e => {
            arr.push({
                name: e,
                value: statis_pie(el, e)
            })
        })
        series.push({ data: arr })
        const obj = {
            title: {
                text: el
            },
            series,
        }
        options.value.options.push(obj)
    })
    console.log(options.value);

    myChart.value = markRaw(echarts.init(echarts_box.value))
    myChart.value.setOption(options.value)
}
function statis_pie(title, xzqh_name) {
    let num = 0
    statis_data.value.forEach(el => {
        if (el.title === title && el.xzqh_name === xzqh_name) {
            num += el.count
        }
    })
    return num
}
function statis_bar(title, rt_code) {
    const arr = new Array(xzhq_data.value.length).fill(0)
    statis_data.value.forEach(el => {
        if (el.title === title && el.rt_code === rt_code) {
            const index = xzhq_data.value.findIndex(e => e === el.xzhq_code)
            arr[index] += el.count
        }
    })
    return arr
}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    inset: 0;

    & div {
        width: 90%;
        height: 80%;
    }
}
</style>